<template>
  <div class="item">
    <div class="cover">
      <el-image
        style="width: 110px; height: 110px"
        :src="proxy.imageUrl + cover"
        fit="fill"
        @click="toBlogDetail"
      />
    </div>
    <div class="content">
      <div class="title link" @click="toBlogDetail">{{ title }}</div>
      <div class="summary">{{ summary }}</div>
      <div class="time">
        <el-tag effect="dark" round type="info">创建时间</el-tag>
        &nbsp;{{ createTime }}
      </div>
      <div class="info">
        <div>
          <el-tag effect="dark" round type="warning">作者</el-tag>
          <span class="link" @click="toUserDetail">&nbsp;{{ nickName }}</span>
        </div>
        <div class="category">
          <el-tag effect="dark" round type="success">分类</el-tag>
          <span class="link" @click="toCategoryDetail">&nbsp;{{ categoryName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import bus from "../utils/EventBus";

const { proxy } = getCurrentInstance();
const router = useRouter();

const props = defineProps({
  cover: String,
  title: String,
  summary: String,
  nickName: String,
  createTime: String,
  categoryName: String,
  blogId: String,
  categoryId:Number,
  userId:Number
});

const toBlogDetail = () => {
  router.push("../blog/" + props.blogId);
  bus.emit("toBlog");
};

const toCategoryDetail = ()=>{
  router.push("../category/" + props.categoryId);
  bus.emit("toCategory");
}

const toUserDetail = ()=>{
  router.push("../user/" + props.userId);
  bus.emit("toUser");
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  padding: 10px;
  height: 130px;
  width: 100%;
  box-sizing: border-box;
  cursor: default;

  .cover {
    width: 110px;
    height: 110px;
    cursor: pointer;
  }

  .content {
    width: 460px;
    margin: 0 10px;
    width: 100%;

    .title {
      width: 460px;
      font-size: 20px;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .summary {
      height: 36px;
      width: 460px;
      font-size: 14px;
      line-height: 18px;
      overflow: hidden;
      text-overflow: -o-ellipsis-lastline;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .time,
    .info {
      display: flex;
      width: 460px;
      height: 24px;
      line-height: 24px;

      .category {
        margin-left: 20px;
      }
    }

    .link {
      color: #79bbff;
      cursor: pointer;
    }
  }
}
</style>